window.onload = function() {
	const oTabIndex = document.getElementById('indexPage')
	const oCategoryIndex = document.getElementById('categoryPage')
	const oThemeIndex = document.getElementById('themePage')
	const oUserIndex = document.getElementById('userPage')

	const indexPage = document.getElementById('indexPageContent')
	const categoryPage = document.getElementById('categoryPageContent')
	const themePage = document.getElementById('themePageContent')
	const minePage = document.getElementById('userPageContent')
	
	

	const oMoveWrapper = document.getElementById('moveWrapper')
	const allWrapper = document.getElementById('allWrapper')

	let allIndex = [oTabIndex, oCategoryIndex, oThemeIndex, oUserIndex]

	let allPage = [minePage, indexPage, categoryPage, themePage]

	indexPage.style.display = 'none'
	categoryPage.style.display = 'none'
	themePage.style.display = 'none'
	// minePage.style.display = 'none'

	oTabIndex.onclick = function() {
		// console.log('展示首页')
		showPage(indexPage, allPage)
		indexLight(oTabIndex, allIndex)
		oTabIndex.children[0].src = "image/homeLight.png"
	}
	oCategoryIndex.onclick = function() {
		// console.log('展示分类页')
		showPage(categoryPage, allPage)
		indexLight(oCategoryIndex, allIndex)
		oCategoryIndex.children[0].src = "image/chooseLight.png"
	}
	oThemeIndex.onclick = function() {
		// console.log('展示主题页')
		showPage(themePage, allPage)
		indexLight(oThemeIndex, allIndex)
		oThemeIndex.children[0].src = "image/zhuantiLight.png"
	}
	oUserIndex.onclick = function() {
		// console.log('展示我的页')
		showPage(minePage, allPage)
		indexLight(oUserIndex, allIndex)
		oUserIndex.children[0].src = "image/mineLight.png"
	}

	function showPage(page, allPage) {
		allPage.forEach(item => {
			item.style.display = 'none'
		})
		page.style.display = 'block'
	}

	function indexLight(index, allIndex) {
		allIndex.forEach(item => {
			item.children[1].style.color = '#8e8e93'

		})
		index.children[1].style.color = '#2ab795'
		oTabIndex.children[0].src = "image/home.png"
		oCategoryIndex.children[0].src = "image/choose.png"
		oThemeIndex.children[0].src = "image/zhuanti.png"
		oUserIndex.children[0].src = "image/mine.png"
	}


	now = 0
	onoff = false;
	oMoveWrapper.addEventListener("touchstart", downfun);

	function downfun(e) {
		startx = e.touches[0].clientX;
		onoff = true;
	}

	oMoveWrapper.addEventListener("touchmove", movefun);

	function movefun(e) {
		if (onoff == true) {
			
			endx = e.touches[0].clientX;
			now = (startx - endx)*-1
		}
		if(now > 0){
			return;
		}
		if(now < -(allWrapper.clientWidth - oMoveWrapper.clientWidth)){
			return
		}
		allWrapper.style.left = now + 'px'
		
	}

	oMoveWrapper.addEventListener("touchend", upfun);

	function upfun() {
		onoff = false; //设置关闭画笔开关
		
	}
}
